<template>
	<view class="page relative">

		<view class="form">
			<view class="flex-row cell-item">
				<view class="flex-row label-item">
					<text class="label-font">群名</text>
					<text class="require-font">*</text>
				</view>
				<view class="flex-row flex-1">
					<input v-model="qunName" class="input-class" placeholder-class="placeholder-class" type="text"
						placeholder="请输入您的群名" />
				</view>
			</view>
			<view class="flex-row cell-item mt-15">
				<view class="flex-row label-item">
					<text class="label-font">手机号</text>
					<text class="require-font">*</text>
				</view>
				<view class="flex-row flex-1">
					<input v-model="phone" class="input-class" placeholder-class="placeholder-class" type="text"
						placeholder="请输入您的电话号" />
				</view>
				
			</view>
			<view class="tips-phone">
				<text>请输入采购商授权电话报名参加</text>
			</view>
			<view v-if="!isLoading" class="button-btm" @click="submit">
				提交
			</view>
			<view v-else class="button-btm">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baoMing,
		currentQi
	} from "@/api/activity.js"
	export default {
		data() {
			return {
				qunName: '', //群名
				phone: '', //手机号
				isLoading: false, //是否加载 防止重复点击
				current: '',
			}
		},
		onShow() {
			console.log(uni.getStorageSync('isPomingTimes'),'isPomingTimes')
			this.getQu();
		},
		methods: {
			getQu(){
				currentQi().then(res => {
					if(res.errno == 0){
						this.current = res.data
						var isPomingTimes = uni.getStorageSync('isPomingTimes')
						if( isPomingTimes && (isPomingTimes == this.current) ){
							uni.reLaunch({
								url: '/pages/trainingCampBang/index'
							})
						}
					}
					
				})
			},
			submit() {
				if (this.isLoading) {
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				if (this.qunName == '') {
					uni.showToast({
						title: '群名不能为空',
						icon: 'none'
					})
					return
				}
				if (this.phone == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
					return
				}
				const regex = /^\d{11}$/;
				if (!regex.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '报名中'
				})
				this.isLoading = true;
				baoMing({
					mobile: this.phone,
					group_name: this.qunName
				}).then(res => {
					if (res.errno == 0) {
						console.log(res.data,'res')
						
						uni.showToast({
							title: '报名成功',
							icon: 'none',
							duration: 1000
						})
						uni.setStorageSync('isPomingTimes',res.data)
						setTimeout(()=>{
							uni.hideLoading();
							this.isLoading = false;
							uni.reLaunch({
								url: '/pages/trainingCampBang/index'
							})
						},1000)
						
					} else {
						uni.hideLoading();
						this.isLoading = false;
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					this.isLoading = false;
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})


			}
		}
	}
</script>

<style>
	@import url(../../static/css/common.css);

	.mt-15 {
		margin-top: 30rpx;
	}

	.page {
		width: 100vw;
		height: 100vh;
		background-image: url('https://audiovideo.axa2.com/Fugwpxzytm3b2diZYT2gyonO3NOD');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.form {
		width: 671rpx;
		/* height: 676rpx; */
		background-image: url('https://terminator.axu9.com/images/xunly-form-submit-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		bottom: 77rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 146rpx 64rpx 73rpx;
	}

	/* .bottom {
		width: 100%;
		height: 100rpx;
		
	} */
	.button-btm {
		width: 100%;
		height: 100rpx;
		border-radius: 50rpx;
		background: #2fa8f3;
		color: #fff;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 100rpx;
		text-align: center;
		margin-top: 48rpx;
	}

	.cell-item {
		width: 541rpx;
		height: 109rpx;
		line-height: 109rpx;
		border-radius: 4rpx;
		background: #ffffff;
		border: 1rpx solid #DDDDDD;
		padding: 0 25rpx;
	}

	.label-item {
		width: 118rpx;
	}

	.input-class {
		height: 100%;
		width: 100%;
		font-size: 28rpx;
		color: #666666;
	}

	.label-font {
		font-size: 28rpx;
		color: #666666;
	}

	.require-font {
		color: red;
		margin-top: -18rpx;
		margin-left: 2rpx;
		font-size: 28rpx;
		color: #FF1D1D;
	}

	.placeholder-class {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.tips-phone {
		color: #FF1D1D;
		font-size: 24rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		text-align: center;
	}
</style>